<template>
<div class="bg comment-container">
  <div style="display: flex;">

    <!-- 左侧自己的评论 -->
    <div style="flex: 1;">
      <el-card style="height: 100%">
        <el-card>
          <div style="display: flex;">
            <div>
              <img :src="user.avatar || require('@/assets/dft_avatar.png')" alt=""
                   style="width: 40px; height: 40px; margin: 0 5px; border-radius: 50%">
              <div>{{ user.name }}</div>
            </div>
            <div style="text-align: center; width: 90%; margin-left: 10px; height: 100px; position: relative">
              <div>
                <el-input type="textarea" placeholder="请输入评价（禁止发布与本驾校内容无关的内容）"
                          v-model="commentContent"></el-input>
              </div>
              <div style="position: absolute; bottom: 0; right: 0">
                <el-button type="primary" @click="publish()">发表</el-button>
              </div>
            </div>
          </div>
        </el-card>
        <div style=" height: 60vh; overflow: auto">
          <div v-for="(item, index) in selfComment" :key="item.id"
               style="display: flex; margin-top: 10px; border-bottom: 1px solid #ccc;">
            <div>
              <img :src="item.avatar || require('@/assets/dft_avatar.png')" alt=""
                   style="width: 40px; height: 40px; margin: 0 5px; border-radius: 50%">
              <div>{{ item.username }}</div>
            </div>
            <div style="margin-left: 5px; width: 95%; padding: 0">
              <div style="margin-bottom: 10px">{{ item.title }} - - - {{ item.coach }} - - - {{ item.score }}</div>
              <div>{{ item.content }}</div>
              <div style="width: 95%; text-align: right;">{{ item.createTime }}</div>
            </div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 右侧公开的评论 -->
    <div style="flex: 1; margin-left: 10px; overflow: auto">
      <el-card>
        <el-card>
          <div style="margin-bottom: 10px;">
            <el-input style="width: 200px" placeholder="请输入评价时间搜索"
                      v-model="searchCreateTime" clearable>
            </el-input>
          </div>
        </el-card>
        <div style="height: 69vh; overflow: auto">
          <div v-for="(item, index) in filteredComment" :key="item.id"
               style="display: flex; margin-top: 10px; border-bottom: 1px solid #ccc;">
            <div>
              <img :src="item.avatar || require('@/assets/dft_avatar.png')" alt=""
                   style="width: 40px; height: 40px; margin: 0 5px; border-radius: 50%">
              <div>{{ item.username }}</div>
            </div>
            <div style="margin-left: 5px; width: 95%; padding: 0">
              <div style="margin-bottom: 10px">{{ item.title }} - - - {{ item.coach }} - - - {{ item.score }}</div>
              <div>{{ item.content }}</div>
              <div style="width: 95%; text-align: right;">{{ item.createTime }}</div>
            </div>
          </div>
        </div>
      </el-card>
    </div>


  </div>
</div>
</template>


<script>
export default {
  name: "Comment",

  // 组件的数据对象
  data() {
    return {
      user: JSON.parse(localStorage.getItem('honey-user') || '{}'), // 从本地存储获取用户信息
      selfComment: [], // 存储自己的评论数据
      openComment: [], // 存储公开的评论数据
      searchCreateTime: "", // 用于搜索公开评论的时间
      commentContent: "", // 存储用户输入的评论内容
    }
  },

  // 计算属性，用于过滤公开的评论
  computed: {
    filteredComment() {
      if (!this.searchCreateTime) {
        return this.openComment; // 如果没有搜索时间，则返回所有公开评论
      }
      // 根据搜索时间过滤公开评论
      return this.openComment.filter(item =>
          item.createTime.includes(this.searchCreateTime)
      );
    }
  },

  // 组件创建时调用 loadComment 方法加载评论数据
  created() {
    this.loadComment();
  },

  methods: {
    // 加载评论数据的方法
    loadComment() {
      // 请求自己的评论数据
      this.$request.get("/comment/selectSelf").then(res => {
        this.selfComment = res.data;
      })
      // 请求公开的评论数据
      this.$request.get("/comment/selectOpen").then(res => {
        this.openComment = res.data;
      })
    },
    // 发表评论的方法
    publish() {
      const now = new Date(); // 获取当前时间
      const halfHour = 10 * 60 * 1000; // 10分钟的时间戳（毫秒）
      // 检查评论内容是否为空
      if (!this.commentContent.trim()) {
        this.$message.error('评论内容不能为空');
        return;
      }
      // 检查是否已经过了半小时
      if (this.lastPublishTime && now - this.lastPublishTime < halfHour) {
        this.$message.error('请等待半小时后再发布新的评论');
        return;
      }
      // 发送 POST 请求创建评论
      this.$request.post("/comment/create", {
        content: this.commentContent,
        username: this.user.username,
      }).then(res => {
        this.loadComment(); // 重新加载评论数据
        this.commentContent = ""; // 清空评论输入框
        this.lastPublishTime = now; // 更新上次发布评论的时间
      }).catch(error => {
        this.$message.error('发布评论失败，请稍后再试');
      });
    },
  },
}
</script>


<style scoped>
.comment-container {
    background:
        linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)), /* 白色半透明遮罩让颜色变淡 */
        url('~@/assets/bg/comment.png') center/cover no-repeat;
}
</style>